<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>omycake首页</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<style>
				/* 轮播样式 */

				* {
			padding: 0px;
			margin: 0px;
		}

		a {
			text-decoration: none;
		}

		ul {
			list-style: outside none none;
		}

		.slider,
		.slider-panel img,
		.slider-extra {
			width: 100%;
			height: 100%;
		}

		.slider {
			text-align: center;
			/* margin: 1% auto;  */
			/* margin-top:1%; */
			position: relative;
		}

		.slider-panel,
		.slider-nav,
		.slider-pre,
		.slider-next {
			position: absolute;
			z-index: 1;
		}

		.slider-panel {
			position: absolute;
		}

		.slider-panel img {
			border: none;
		}

		.slider-extra {
			position: relative;
		}

		.slider-nav {
			margin-left: -51px; 
			position: absolute;
			left: 60%;
    padding-top: 40%;

		}

		.slider-nav li {
			/* background: #3e3e3e;  */
			background: rgba(0, 0, 0, 0.2);
			border-radius: 50%;
			color: #fff;
			cursor: pointer;
			margin: 0 .2rem;
			overflow: hidden;
			text-align: center;
			display: inline-block;
			height: .6rem;
			line-height: .4rem;
			width: .6rem;
		}

		.slider-nav .slider-item-selected {
			/* background: blue;  */
			background: white;
		}

		.slider-page a {
			background: rgba(0, 0, 0, 0.2);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
			color: #fff;
			text-align: center;
			display: block;
			font-family: "simsun";
			font-size: .5rem;
			width: .5rem;
			height: 2rem;
			line-height: 2rem;
			margin-top: 20%;
			/* margin-top: -1.3rem; 
 position: absolute; 
 top: 50%;  */
		}

		.slider-page a:HOVER {
			background: rgba(0, 0, 0, 0.4);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
		}

		.slider-next {
			left: 100%;
			margin-left: -1.2rem;
		}

		.slider {
			width: 100%;
			/* border:1px solid #ff5777; */
		}

		.slider-main {
			width: 100%;
		}

		.slider-panel {
			width: 100%;
		}

		.slider-panel a {
			display: inline-block;
			width: 100%;
		}

		.slider-panel a img {
			width: 100%;
			height: 100%;
		}

		.slider-page {
			width: 100%;
			display:none;
		}

		.tuijian_box {
			margin-top: 44%;
		}
		</style>
	</head>
	<body>
		<!--header-->
		<header class="clearfix">
			<a href="#" class="fl"><span class="iconfont">&#xf0010;</></a>
			<h2 class="fl"><img src="images/index_omc.png" alt="" /></h2>
			<a href="search.html" class="fr"><i class="iconfont">&#xe633;</i></a>
		</header>
		<!--banner-->
		<div class="banner" style="position:relative;top:-16rem;left:0px;width:100%;">
			<div class="bimgList clearfix">
				<!-- <a href="#"><img src="images/index1.jpg" /></a> -->


				<div class="banner">
					<!-- <img src="images/首页_02.gif" /> -->
					<div class="slider">
						<ul class="slider-main">
							<li class="slider-panel">
								<a href="#" target="_blank">
									<img src="images/banner1.jpg">
								</a>
							</li>
							<li class="slider-panel">
								<a href="#" target="_blank">
									<img src="images/banner2.jpg">
								</a>
							</li>
							<li class="slider-panel">
								<a href="#" target="_blank">
									<img src="images/banner3.jpg">
								</a>
							</li>
							<li class="slider-panel">
								<a href="#" target="_blank">
									<img src="images/banner4.jpg">
								</a>
							</li>
						</ul>
						<div class="slider-extra">
							<ul class="slider-nav">
								<li class="slider-item"></li>
								<li class="slider-item"></li>
								<li class="slider-item"></li>
								<li class="slider-item"></li>
							</ul>
							<div class="slider-page">
								<a class="slider-pre" href="javascript:;;">
									<</a>
										<a class="slider-next" href="javascript:;;">></a>
							</div>
						</div>
					</div>

				</div>	












			</div>
			<ul class="dotList">
				<li><a href="#" class="on"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<!--nav-->
		<nav style="margin-top: 16rem;"> 
			<a href="cakeSort.html"><img src="images/index_icon1.jpg"/><span>糕点</span></a>
			<a href="cakeSort.html"><img src="images/index_icon2.jpg"/><span>饮品</span></a>
			<a href="intro.html"><img src="images/index_icon3.jpg"/><span>推荐</span></a>
			<a href="cakeSort.html"><img src="images/index_icon4.jpg"/><span>甜点</span></a>
			<a href="fruitSort.html"><img src="images/index_icon5.jpg"/><span>水果</span></a>
		</nav>
		<!--like-->
		<div class="like">
			<span></span>
			<h3><i class="iconfont">&#xe689;</i><a href="#">今日上新</a><i class="iconfont">&#xe689;</i></h3>
			<span></span>
		</div>
		<!--likeList-->
	    <div class="swiper-container">
	        <div class="swiper-wrapper"  style="transform: translate3d(-73.5px, 0px, 0px);">
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u5.jpg" class="gameImg" />
		                <div><p>创意草莓蛋挞</p><p>1080人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u2.jpg" class="gameImg" />
			            <div><p>蓝莓小糕点</p><p>800人购买</p></div>
		            </a>
				</div>
				<div class="swiper-slide">
	            	<a href="#">
	            		<img src="images/index_u6.jpg" class="gameImg" />
		                <div><p>可口黑森林</p><p>666人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u8.jpg" class="gameImg" />
		                <div><p>自制草莓汽水</p><p>1080人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u3.jpg" class="gameImg" />
			            <div><p>西式小蛋糕</p><p>500人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u4.jpg" class="gameImg" />
			            <div><p>巧克力蛋糕</p><p>1500人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
	            		<img src="images/index_u1.jpg" class="gameImg" />
		                <div><p>抹茶蛋糕</p><p>300人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
	            		<img src="images/index_u6.jpg" class="gameImg" />
		                <div><p>可口黑森林</p><p>666人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u8.jpg" class="gameImg" />
		                <div><p>自制草莓汽水</p><p>1080人购买</p></div>
		            </a>
	            </div>
	        </div>
	    </div>
		<!--us-->
		<div class="us">
			<span></span>
			<h3><i class="iconfont">&#xe689;</i><a href="#">猜你喜欢</a><i class="iconfont">&#xe689;</i></h3>
			<span></span>
		</div>
		<div class="imgs"><a href="#"><img src="images/lx.jpg"/></a></div>
		<!--usList-->
		<div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u5.jpg" class="gameImg" />
		                <div><p>创意草莓蛋挞</p><p>1080人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u2.jpg" class="gameImg" />
			            <div><p>蓝莓小糕点</p><p>800人购买</p></div>
		            </a>
				</div>
				<div class="swiper-slide">
	            	<a href="#">
	            		<img src="images/index_u6.jpg" class="gameImg" />
		                <div><p>可口黑森林</p><p>666人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u8.jpg" class="gameImg" />
		                <div><p>自制草莓汽水</p><p>1080人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u3.jpg" class="gameImg" />
			            <div><p>西式小蛋糕</p><p>500人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u4.jpg" class="gameImg" />
			            <div><p>巧克力蛋糕</p><p>1500人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
	            		<img src="images/index_u1.jpg" class="gameImg" />
		                <div><p>抹茶蛋糕</p><p>300人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
	            		<img src="images/index_u6.jpg" class="gameImg" />
		                <div><p>可口黑森林</p><p>666人购买</p></div>
		            </a>
	            </div>
	            <div class="swiper-slide">
	            	<a href="#">
		                <img src="images/index_u8.jpg" class="gameImg" />
		                <div><p>自制草莓汽水</p><p>1080人购买</p></div>
		            </a>
	            </div>
	        </div>
	    </div>
		<div style="padding-top: 5rem;"></div>
		<!--footer-->
		<footer>
			<a href="index.html"><i class="iconfont">&#xe602;</i><span>主页</span></a>
			<a href="select.html"><i class="iconfont">&#xe63a;</i><span>精选</span></a>
			<a href="uploading1.html"><img src="images/icon-bg.png"/><span>上传</span></a>
			<a href="sweetRing.html"><img src="images/icon-ttq.png"/><span>甜甜圈</span></a>
			<a href="memenber.html"><img src="images/icon-csm.png"/><span>我的</span></a>
		</footer>
		<script type="text/javascript" src="js/public.js" ></script>

		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index-lunbo.js"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
		        slidesPerView: 4,
		        centeredSlides: true,
		        paginationClickable: true,
		        spaceBetween: 10
		    });
		</script>
		
		
		
		
		
	</body>
</html>
